<template>
  <view class="order-content">
    <view class="btn-scroll flex_p_lr">
      <view class="btn-box rflex flex_y_center flex_p_lr">
        <view class="btn-item rflex flex_y_center flex_x_center" :class="btn_item_active === item.id ? 'active' : ''"
              @click="btn_choose(item)"
              v-for="item in btn_item_list" :key="item.id">{{item.txt}}</view>
      </view>
    </view>
    <div class="flex_h_5"></div>
    <view class="search-box flex_p_lr">
      <uv-search placeholder="请输入搜索内容" v-model="keyword" clearabled :show-action="false" height="45" bgColor="#fff"></uv-search>
    </view>
    <div class="flex_h_10"></div>
    <view class="list-box flex_p">
      <view class="list_item_view" v-for="item in list" :key="item.id">
        <view class="list_item flex_p_lr flex_y_center" @click="toDetail(item.id)">
          <view class="line_co rflex flex_y_center">
            <image class="image" src="https://public-yz.oss-cn-nanjing.aliyuncs.com/b409ad58b34c8ea146b61cff3ad3375513a2af4d6abd697ac5d349653bdaf70a.png" />
            <view class="flex_w_5"></view>
            <view class="co_name">{{item.name}}</view>
            <view class="flex_w_5"></view>
            <view class="threeMini bg_yellow">图片</view>
            <view class="threeMini bg_blue">文件</view>
          </view>
          <view class="status_box rflex flex_y_center">
            <view class=""> 创建人：{{item.peo_name}}</view>
            <view class="flex_w_8"></view>
            <view class="">创建日期：{{item.time}}</view>
          </view>
          <view class="flex_h_5"></view>
          <view class="three_heng_name rflex flex_y_center">
            <view class="item_three_box rflex flex_y_center" v-for="other in item.moreName" :key="other">
              <uv-button type="primary" plain size="mini" shape="circle">{{other}}</uv-button>
              <view class="flex_w_8"></view>
            </view>
          </view>
          <view class="flex_h_10"></view>
          <view class="main-content rflex">
            <view class="flex_2">
              <view class="content_content">订单号:SN-2025-1234567</view>
              <view class="content_content">合同号:SN-2025-1234567</view>
              <view class="content_content rflex">
                <view class="txt">交货日期:2025-05-30</view>
                <view class="flex_w_8"></view>
                <uv-button type="error"  plain size="mini" v-if="item.status === 0">剩余5天</uv-button>
                <uv-button type="info"  plain size="mini" v-else>已过期</uv-button>
              </view>
            </view>
            <view class="flex_1 rflex flex_x_center flex_y_center">
              <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/95cf028632aba6c09e58c9321d16938f2def44a0faae4f5a86d422987895738a.png" style="width: 90%;height: 80px;margin-top: -10px"/>
            </view>
          </view>
        </view>
        <view class="flex_h_15"></view>
      </view>
    </view>
    <view class="flex_h_15"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      btn_item_active: 1,
      btn_item_list: [
        {id: 1, txt: '全部'},
        {id: 2, txt: '代办任务'},
        {id: 3, txt: '执行中'},
        {id: 4, txt: '已完成'},
      ],
      list: [{
        id: 1,
        name: '郑州博杰机械设备有限公司',
        peo_name: '陈城城',
        time: '2025-05-01',
        moreName: ['产品名称1'],
        status: 0,
      }, {
        id: 2,
        name: '郑州博杰机械设备有限公司',
        peo_name: '陈城城',
        time: '2025-05-01',
        moreName: ['产品名称1', '产品名称2'],
        status: 0,
      }, {
        id: 3,
        name: '郑州博杰机械设备有限公司',
        peo_name: '陈城城',
        time: '2025-05-01',
        moreName: ['产品名称1', '产品名称2', '产品名称3'],
        status: 1,
      }]
    };
  },
  methods:{
    toDetail() {
      
    },
  }
}
</script>
<style>
page{
  background: #EFEFEF;
}
</style>
<style scoped lang="scss">
.order-content{
  .btn-scroll{
    width: 100vw;
    background-image: linear-gradient(#2D4C98,#EFEFEF);
    .btn-box{
      height: 70px;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      .btn-item{
        min-width: 100px;
        height: 36px;
        margin-right: 20rpx;
        border-radius: 13px;
        border: 1px solid #2D4C98;
        background: #E3EBFF;
        color: #2D4C98;
        &.active{
          background: #2D4C98;
          color: #fff;
        }
      }
    }
  }

  .list-box{
    padding-bottom: 25px;
    .list_item_view{
      .list_item{
        border-radius: 12px;
        background: url("http://public-yz.oss-cn-nanjing.aliyuncs.com/2025/05/25/00ffc53230ce4ad3beb1159fcafdeace.png") no-repeat;
        background-size: 100% 100%;
        .line_co{
          height: 45px;
          image{
            width: 25px;
            height: 25px;
          }
          .threeMini {
            padding: 1px 3px;
            margin-right: 5px;
            background: #FF000029;
            border: 1px solid #FF0000;
            color: #FF0000;
            font-size: 20rpx;

            &.bg_blue {
              background: #1B76FF29;
              border: 1px solid #1B76FF;
              color: #1B76FF;
            }

            &.bg_yellow {
              background: #FFAA5C29;
              border: 1px solid #FFAA5C;
              color: #FFAA5C;
            }
          }
          .co_name{
            font-size: 30rpx;
            font-weight: bolder;
          }
        }
        .status_box{
          height: 30px;
          font-size: 14px;
          color: #1B76FF;
          image{
            height: 20px;
          }
        }
        .three_heng_name{
          height: 35px;
        }
        .main-content{
          height: 100px;
          .content_content{
            height: 25px;
            font-size: 28rpx;
            color: #5B5B5B;
          }
          .product_introduction{
            font-size: 24rpx;
            color: #868686;
            display: -webkit-box;
            -webkit-line-clamp: 4; /* 限制文本显示为3行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
